<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容平台 - 首页</title>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="container">
            <a href="/" class="logo">内容平台</a>
            
            <!-- 主导航 -->
            <nav class="main-nav">
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/categories">分类</a></li>
                    <li><a href="/hot">热门</a></li>
                    <li><a href="/about">关于</a></li>
                </ul>
            </nav>
            
            <!-- 用户操作区 -->
            <div class="user-actions">
                <div class="search-box">
                    <input type="text" placeholder="搜索内容...">
                    <button class="search-btn">搜索</button>
                </div>
                <div class="auth-buttons">
                    <a href="/login" class="btn btn-outline">登录</a>
                    <a href="/register" class="btn btn-primary">注册</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
        <div class="container">
            <!-- 内容推荐区 -->
            <section class="content-feed">
                <!-- 内容卡片将通过JS动态加载 -->
                <div class="content-list" id="contentList"></div>
                
                <!-- 分页控件 -->
                <div class="pagination">
                    <button class="prev-btn" disabled>上一页</button>
                    <span class="page-info">1/10</span>
                    <button class="next-btn">下一页</button>
                </div>
            </section>
            
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <!-- 用户信息卡 (登录后显示) -->
                <div class="user-card" id="userCard" style="display:none;">
                    <div class="user-avatar">
                        
                    </div>
                    <div class="user-info">
                        <h4 class="username">用户名</h4>
                        <p class="user-bio">个人简介...</p>
                    </div>
                    <div class="user-stats">
                        <div class="stat-item">
                            <span class="stat-value">120</span>
                            <span class="stat-label">关注</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">350</span>
                            <span class="stat-label">粉丝</span>
                        </div>
                    </div>
                </div>
                
                <!-- 热门标签 -->
                <div class="tag-cloud">
                    <h3>热门标签</h3>
                    <div class="tags">
                        <a href="/tag/ai" class="tag">AI</a>
                        <a href="/tag/tech" class="tag">科技</a>
                        <a href="/tag/movie" class="tag">电影</a>
                        <!-- 更多标签... -->
                    </div>
                </div>
                
                <!-- 广告位 -->
                <div class="ad-container">
                    <div class="ad-label">广告</div>
                    <a href="#" class="ad-content">
                        
                    </a>
                </div>
            </aside>
        </div>
    </main>

    <!-- 底部信息栏 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-links">
                <div class="link-group">
                    <h4>关于我们</h4>
                    <ul>
                        <li><a href="/about">公司简介</a></li>
                        <li><a href="/contact">联系我们</a></li>
                        <li><a href="/jobs">加入我们</a></li>
                    </ul>
                </div>
                <div class="link-group">
                    <h4>帮助中心</h4>
                    <ul>
                        <li><a href="/faq">常见问题</a></li>
                        <li><a href="/feedback">意见反馈</a></li>
                        <li><a href="/policy">隐私政策</a></li>
                    </ul>
                </div>
                <div class="link-group">
                    <h4>关注我们</h4>
                    <div class="social-links">
                        <a href="#"><i class="icon-wechat"></i></a>
                        <a href="#"><i class="icon-weibo"></i></a>
                        <a href="#"><i class="icon-qq"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>© 2025 内容平台 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 浮动操作按钮 -->
    <div class="fab-container">
        <button class="fab-btn" id="backToTop">
            <i class="icon-arrow-up"></i>
        </button>
    </div>

    <!-- JavaScript 文件 -->
    <script src="js/main.js"></script>
</body>
</html>

<style>
  /* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* 按钮基础样式 */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #1890ff;
    color: white;
    border: 1px solid #1890ff;
}

.btn-primary:hover {
    background-color: #40a9ff;
    border-color: #40a9ff;
}

.btn-outline {
    background-color: transparent;
    color: #1890ff;
    border: 1px solid #1890ff;
}

.btn-outline:hover {
    color: #40a9ff;
    border-color: #40a9ff;
}

/* 导航栏样式 */
.navbar {
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 15px 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    color: #1890ff;
}

.main-nav ul {
    display: flex;
    gap: 20px;
}

.main-nav a {
    padding: 8px 0;
    font-size: 16px;
}

.main-nav a:hover {
    color: #1890ff;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-box {
    display: flex;
}

.search-box input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-btn {
    padding: 8px 12px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* 主要内容区布局 */
.main-content {
    padding: 20px 0;
}

.main-content .container {
    display: flex;
    gap: 20px;
}

.content-feed {
    flex: 1;
}

.sidebar {
    width: 300px;
}

/* 内容卡片样式 */
.content-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 15px;
}

.card-title {
    font-size: 18px;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-summary {
    color: #666;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 14px;
}

.card-actions {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    cursor: pointer;
}

.action-btn:hover {
    color: #1890ff;
}

/* 侧边栏样式 */
.user-card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-weight: bold;
    color: #333;
}

.stat-label {
    font-size: 12px;
    color: #999;
}

.tag-cloud {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tag-cloud h3 {
    margin-bottom: 15px;
    font-size: 16px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: #f0f0f0;
    border-radius: 15px;
    font-size: 12px;
    color: #666;
}

.tag:hover {
    background-color: #e6f7ff;
    color: #1890ff;
}

.ad-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ad-label {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 12px;
}

.ad-content img {
    width: 100%;
    display: block;
}

/* 底部样式 */
.footer {
    background-color: #333;
    color: #999;
    padding: 30px 0;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.link-group h4 {
    color: #eee;
    margin-bottom: 15px;
    font-size: 16px;
}

.link-group ul li {
    margin-bottom: 8px;
}

.link-group a:hover {
    color: #eee;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #444;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: #999;
}

.social-links a:hover {
    background-color: #1890ff;
    color: white;
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
}

/* 浮动按钮 */
.fab-container {
    position: fixed;
    right: 30px;
    bottom: 30px;
}

.fab-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1890ff;
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.fab-btn:hover {
    background-color: #40a9ff;
    transform: translateY(-3px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .main-nav ul {
        justify-content: center;
    }
    
    .main-content .container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 20px;
    }
}
</style>

<script>
    // 内容卡片模板
function createContentCard(content) {
    return `
        <div class="content-card" data-id="${content.id}">
            
            <div class="card-body">
                <h3 class="card-title">${content.title}</h3>
                <p class="card-summary">${content.summary}</p>
                <div class="card-meta">
                    <span>${content.author}</span>
                    <span>${content.publishTime}</span>
                </div>
                <div class="card-actions">
                    <div class="action-btn like-btn" data-liked="${content.isLiked}">
                        <i class="icon-like"></i>
                        <span>${content.likeCount}</span>
                    </div>
                    <div class="action-btn comment-btn">
                        <i class="icon-comment"></i>
                        <span>${content.commentCount}</span>
                    </div>
                    <div class="action-btn favorite-btn" data-favorited="${content.isFavorited}">
                        <i class="icon-star"></i>
                        <span>收藏</span>
                    </div>
                </div>
            </div>
        </div>
    `;
}

// 加载内容数据
async function loadContent(page = 1, size = 10) {
    try {
        const response = await fetch(`/api/content/recommend?page=${page}&size=${size}`);
        const data = await response.json();
        
        const contentList = document.getElementById('contentList');
        contentList.innerHTML = '';
        
        data.list.forEach(content => {
            contentList.innerHTML += createContentCard(content);
        });
        
        // 更新分页信息
        updatePagination(data.total, page, size);
        
    } catch (error) {
        console.error('加载内容失败:', error);
    }
}

// 更新分页控件
function updatePagination(total, currentPage, pageSize) {
    const totalPages = Math.ceil(total / pageSize);
    const pageInfo = document.querySelector('.page-info');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    
    pageInfo.textContent = `${currentPage}/${totalPages}`;
    
    prevBtn.disabled = currentPage <= 1;
    nextBtn.disabled = currentPage >= totalPages;
    
    // 更新按钮事件
    prevBtn.onclick = () => {
        if (currentPage > 1) loadContent(currentPage - 1, pageSize);
    };
    
    nextBtn.onclick = () => {
        if (currentPage < totalPages) loadContent(currentPage + 1, pageSize);
    };
}

// 初始化交互事件
function initInteractions() {
    // 点赞/取消点赞
    document.addEventListener('click', async (e) => {
        if (e.target.closest('.like-btn')) {
            const btn = e.target.closest('.like-btn');
            const contentId = btn.closest('.content-card').dataset.id;
            const isLiked = btn.dataset.liked === 'true';
            
            try {
                const response = await fetch('/api/interaction/like', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${getToken()}`
                    },
                    body: JSON.stringify({
                        contentId,
                        action: isLiked ? 'unlike' : 'like'
                    })
                });
                
                const result = await response.json();
                if (result.code === 200) {
                    // 更新UI
                    const likeCount = btn.querySelector('span');
                    if (isLiked) {
                        btn.dataset.liked = 'false';
                        likeCount.textContent = parseInt(likeCount.textContent) - 1;
                    } else {
                        btn.dataset.liked = 'true';
                        likeCount.textContent = parseInt(likeCount.textContent) + 1;
                    }
                }
            } catch (error) {
                console.error('操作失败:', error);
            }
        }
        
        // 收藏/取消收藏处理类似...
    });
    
    // 返回顶部按钮
    const backToTop = document.getElementById('backToTop');
    window.addEventListener('scroll', () => {
        backToTop.style.display = window.scrollY > 300 ? 'block' : 'none';
    });
    
    backToTop.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

// 获取用户token
function getToken() {
    return localStorage.getItem('token');
}

// 初始化用户状态
function initUserState() {
    const token = getToken();
    if (token) {
        // 显示用户卡片
        document.getElementById('userCard').style.display = 'block';
        
        // 更新登录状态
        const authButtons = document.querySelector('.auth-buttons');
        authButtons.innerHTML = `
            <a href="/profile" class="user-avatar-small">
                
            </a>
        `;
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    loadContent();
    initInteractions();
    initUserState();
});
</script>